<script setup>
import { inject, watchEffect } from 'vue';
import * as THREE from 'three';

const scene = inject('scene');

const props = defineProps({
  x: {
    type: Number,
    default: 0,
  },
  y: {
    type: Number,
    default: 0,
  },
  z: {
    type: Number,
    default: 5,
  },
  color: {
    type: String,
    default: '#ffffff',
  },
  type: {
    type: String,
    default: 'SpotLight',
  },
  brightness: {
    type: Number,
    default: 1,
  },
});

const light = new THREE[ props.type ]( new THREE.Color( props.color ), props.brightness );
light.position.set( props.x, props.y, props.z );
scene.add( light );

watchEffect(() => {
  light.position.set( props.x, props.y, props.z );
});

watchEffect(() => {
  light.intensity = props.brightness;
});

</script>

<template></template>
